<!DOCTYPE html>
<html>
<head>
    <title>css自定义radio和checkbox样式</title>
    <style>
        .radio-box {
            position: relative;
            width: 200px;
            height: 70px;
            border: 1px solid #000;
        }

        .radio-box input[type=radio],
        .radio-box input[type=checkbox] {
          /*  position: absolute;
            top: 0;
            left: 0;*/
            width: 20px;
            height: 20px;
            opacity: 0;
        }

        .radio-box input:checked+label.radio-stype {
            background-color: #07A9FF;
            border: 1px solid #07A9FF;
        }

        .radio-box label.radio-stype {
            position: absolute;
            top: 50%;
            left: 20px;
            width: 18px;
            height: 18px;
            margin-top: -9px;
            border-radius: 50%;
            border: 1px solid #9EA2A3;
            text-indent: 20px;
        }

        .radio-box input:checked+label.radio-stype::after {
            position: absolute;
            content: "";
            width: 4px;
            height: 9px;
            top: 2px;
            left: 6px;
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="radio-box">
        <input type="radio" name="pay-type" id="radio1"> 
        <label for="radio1" class="radio-stype">radio1</label>
    </div>

    <div class="radio-box">
        <input type="radio" name="pay-type" id="radio2"> 
        <label for="radio2" class="radio-stype">radio2</label>
    </div>

    <!-- ******华丽的分割线****** -->
    
    <div class="radio-box">
        <input type="checkbox" id="checked1"> 
        <label for="checked1" class="radio-stype">checked1</label>
    </div>
    <div class="radio-box">
        <input type="checkbox" id="checked2"> 
        <label for="checked2" class="radio-stype">checked2</label>
    </div>
    <div class="radio-box">
        <input type="checkbox" id="checked3"> 
        <label for="checked3" class="radio-stype">checked3</label>
    </div>
</body>
</html>